<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <title></title>
        <style>
        </style>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    </head>
    <body>
       <div id="app">
           <my-btn @task='allCounter();'></my-btn>
           <my-btn @task='allCounter();'></my-btn>
           <my-btn @task='allCounter();'></my-btn>
           <my-btn @task='allCounter();'></my-btn>

           <p>一共点击了{{total}}次</p>
       </div>
       <template id="my_btn">
           <button @click="task()">点击了{{counter}}次</button>
       </template>
    </body>
</html>
<script>
Vue.component('my-btn',{
    template:'#my_btn',
    data(){
        return {
            counter:0
        }
    },
    methods:{
        task(){
            this.counter +=1;
            //通知外界，我调用了这个方法
            this.$emit('task')
        }
    }
})
    //1.创建vue实例
    let vm=new Vue({
        el:'#app',
        data:{
            total:0
        },
        methods:{
            allCounter(){
                this.total+=1;
            }
        }
    })
</script>